<!--
 * @Description:多物体淡入淡出.html
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-06 22:39:06
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>多物体淡入淡出.html</title>
	<style>
		#div1 {
			width: 100px;
			height: 100px;
			flex: left;
			background: red;
			margin: 20px;
			opacity: 0.3;
		}
	</style>
	<script>
		window.onload = function () {
			// var alpha=30;
			var odiv = document.getElementsByTagName('div')
			function startmove(obj, itarget) {
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					var speed = (itarget - obj.alpha) / 6
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
					if (obj.alpha == itarget) {
						clearInterval(obj.timer)
					} else {
						obj.alpha+=speed
						obj.style.opacity = obj.alpha/100
					}
				}, 30)
			}

			for (let index = 0; index < odiv.length; index++) {
				const element = odiv[index];
				element.timer = null
				element.alpha=30
				element.onmouseover = function () {
					startmove(this, 100)
				}
				element.onmouseout = function () {
					startmove(this, 30)
				}
			}

		}
	</script>
</head>

<body>
	<p>
		1 在多物体运动框架里面<br>
		所以的运动属性都不能公用
	</p>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>

</body>

</html>